<template>
	<view class="bgbox">
    <view class="hot_forum sort">
    	<view class="title" style="margin-top: 20rpx;"></view>
    	<view class="content">
    		<view class="list">
    			<view class="item" v-for="(item,index) in userInfolist" :key='item.id'>
					
    				<view class="header flex">
    					<image class="avatar" :src="item.member_info.avatar"></image>
    					<view class="username">{{item.member_info.name}}</view>
					    <view class="time" style="color: gray;font-size: 12px;position: absolute;right: 60rpx;">
					    	{{item.updatetime}}
					    </view>
    				</view>
    				  <view class="inner" >
    					<view class="detail el4" style="">
    					</view>
    				</view>
					<view class="innerContent" :style="{ '-webkit-line-clamp': '4' }" @click="topicDetail(item.id,$event)">
						<view class="" style="font-size: 12px;padding-left: 76rpx;
						margin-top: 5rpx;line-height: 35rpx;">
							{{item.title}}
						</view> 
					</view>
    			</view>
    		</view>
    	</view>
    </view>

	</view>
</template>

<script>
	import {
     userInfoAPI
	} from '@/api/api.js'
	export default {
		components: {},
		data() {
			return {
				userInfolist: [],

			}
		},
		
		methods: {
			/* 跳转详情页 */
			topicDetail(id, e) {
				uni.navigateTo({
					url: `/pages/story/storydetails?id=${id}`
				})
			},
			// 监听滚动到底部
			scrollClick() {
				this.page++
				this.getList()
			},
			getList(id) {
				userInfoAPI({
					clsss: 2,
					to_member_id:id
				}).then(res => {
					console.log(res)
					this.userInfolist=res.data.data.rows
					console.log(this.userInfolist)
				})
			},
					
		},
		onLoad(opt) {
			const id=opt.id
			console.log(id)
		   //const queryParams = this.$mp.query;
		    this.getList(id); 
		}

	}
</script>
<style lang="scss" scoped>
	.bgbox {
		position: relative;		
		min-height: 100vh;
		background: url('../../static/image/bg.png') no-repeat;
		background-size: 100% 100%;
	}

	.bgpic {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: auto;
		height: auto;
		min-height: calc(100vh - 44px);
		z-index: 0;

	}
	.story {
		box-sizing: border-box;
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		.story_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background-color: #fff;
			&>view {
				width: 20%;
				text-align: center;
				font-size: 26rpx;
			}
		}

		
	}
	
	.hot_forum {
		flex: 1;
		display: flex;
		flex-direction: column;
	
		.title {
			padding: 0 32rpx 24rpx;
		}
	
		.content {
			width: 100%;
			flex: 1;
			background: url("../../static/image/forum/bg.png") no-repeat 100%;
			background-position: bottom right;
			background-color: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
	
			.list {
				.item {
					width: 100%;
					border-bottom: 2rpx solid #f5f5f5;
					padding: 32rpx;
					box-sizing: border-box;
	
					.header {
						.avatar {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
	
						.username {
							margin: 0 16rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #333333;
							line-height: 44rpx;
						}
	
						.time {
							//font-size: 10rpx;
							font-weight: 400;
							color: #9EA7B6;
							line-height: 28rpx;
						}
	
						.focus {
							width: 96rpx;
							height: 40rpx;
							border-radius: 40rpx;
							border: 2rpx solid #275515;
							font-size: 20rpx;
							color: #275515;
							line-height: 28rpx;
							margin: 0 0 0 auto;
						}
					    
						.subscribe-btn {
							display: inline-block;
							position: absolute;
							right: 24rpx;
							top: 30rpx;
							width: 100rpx;
							padding: 4rpx 12rpx;
							border-radius: 9px;
							overflow: hidden;
							text-align: center;
							line-height: 14px;
							font-size: 10px;
							font-weight: 500;
							color: #fff;
							margin-top: 50rpx;
						}
						
						.unfollow {
							background-color: #47663e;
						}
						
						.follow {
							color: #333;
							background-color: #e5e5e5;
						}
						
					}
	
					.inner {
						padding-left: 76rpx;
						margin-top: 16rpx;
	
						.detail {
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							line-height: 34rpx;
						}
	
						.img_list {
							margin-top: 16rpx;
	
							.img_item {
								width: 240rpx;
								height: 200rpx;
								border-radius: 10rpx;
								margin-left: 16rpx;
	
								&:nth-child(1) {
									margin-left: 0;
								}
							}
						}
	
						.opt {
							margin-top: 32rpx;
	
							uni-image {
								width: 28rpx;
								height: 28rpx;
							}
	
							.num {
								margin: 0 48rpx 0 8rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #7C8491;
								line-height: 40rpx;
							}
						}
					}
				}
			}
		}
	}
	
.innerContent {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word; /* Optional: To handle long words */
  text-overflow: ellipsis;
  margin-top: 20rpx;
  //background-color: pink !important;
}
</style>
